<template>
  <div id="app">
    <header>
      <img src="../../assets/images/headerBg.png" alt="">
      <router-link to="/">
        <i></i>
        <span>消息</span>
      </router-link>
    </header>
    <nav>
      <div class="navBox">
        <router-link to="/set" class="set"></router-link>
        <ul class="clearfix">
          <li class="fl">
            <div><img src="../../assets/images/portrait.png" alt=""></div>
          </li>
          <li class="fl">
            <h1>红烧铁板牛肉
              <router-link to="/">V<sub>3</sub>会员</router-link>
            </h1>
            <p>听说没有个性签名才个性 <i></i></p>
          </li>
        </ul>
        <div class="clearfix">
          <router-link to="/withdraw" class="fl">提现</router-link>
          <router-link to="/RechargeConfirm" class="fr">充值</router-link>
        </div>
      </div>
    </nav>
    <ul class="property">
      <li>
        <h3>资产总额</h3>
        <h1><em>¥</em> {{balance}}</h1>
        <h4>(可用余额：{{availableBalance}})</h4>
      </li>
      <li>
        <h3>金豆数量</h3>
        <h1>0</h1>
        <h4>(0金豆即将过期)</h4>
      </li>
    </ul>
    <div class="function">
      <h1>商城功能</h1>
      <ul>
        <li>
          <router-link to='/order'>
            <div></div>
            <span>预付款</span>
          </router-link>
        </li>
        <li>
          <router-link to='/advanceTicket'>
            <div></div>
            <span>预付款券</span>
          </router-link>
        </li>
        <li>
          <router-link to='/ticket'>
            <div></div>
            <span>优惠券</span>
          </router-link>
        </li>
        <li>
          <router-link to='/'>
            <div></div>
            <span>领券中心</span>
          </router-link>
        </li>
        <li>
          <router-link to='/wallet'>
            <div></div>
            <span>我的钱包</span>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="function-tool">
      <h1>我的工具</h1>
      <ul>
        <li>
          <router-link to='/member'>
            <div></div>
            <span>会员中心</span>
          </router-link>
        </li>
        <li>
          <router-link to='/agent'>
            <div></div>
            <span>经纪人</span>
          </router-link>
        </li>
        <li @click="_queryRealName">
          <a>
            <div></div>
            <span>实名认证</span>
          </a>
        </li>
        <li>
          <router-link to='/security'>
            <div></div>
            <span>账户安全</span>
          </router-link>
        </li>
        <li>
          <router-link to='/parameter'>
            <div></div>
            <span>参数设置</span>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="function-assist">
      <h1>辅助功能</h1>
      <ul>
        <li>
          <router-link to='/user'>
            <div></div>
            <span>帮助中心</span>
          </router-link>
        </li>
        <li>
          <router-link to='/'>
            <div></div>
            <span>意见反馈</span>
          </router-link>
        </li>
        <li>
          <router-link to='/'>
            <div></div>
            <span>关于我们</span>
          </router-link>
        </li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <footers :navIndex="1"></footers>
  </div>
</template>
<script>
  import footers from '../commonList/Footer.vue'
  import {localStorageGet,localStorageSet} from '../../assets/js/localStorage'

  export default {
    name: "user-center",
    components: {
      footers
    },
    data() {
      return {
        balance: '0',
        availableBalance: '0',
        accountNo: ''
      }
    },
    methods: {
      _totalAssets() {
        let _this = this
        this.$http.post('user/api/user/get/account/info', {
          code: localStorageGet('code'),
        })
          .then(function (response) {
            let data = response.data.data
            _this.balance = data.balance
            _this.availableBalance = data.availableBalance
          })
          .catch(function (error) {
            console.log(error);
          })
      },
      //获取accountNo
      _queryuserId() {
        let _this = this
        this.$http.post('user/api/user/userInfo/getUserAccountInfo',
          {code: localStorageGet('code')}
        )
          .then(function (response) {
            _this.accountNo = response.data.data.accountNo
            localStorageSet('userUid', _this.accountNo)
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      _queryRealName() {
        let _this = this
        this.$http({
          url: '/bank/trade/bank/biz/query/status/list',
          method: 'post',
          data: {userUid: _this.accountNo},
          transformRequest: [function (data) {
            data = _this.$Qs.stringify(data);
            return data;
          }],
          headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        })
          .then(function (response) {
            localStorageSet('idRealNamedata',response.data.data)
            if (response.data.data.length == 0) {
              _this.$router.push('/notVerify')
            } else {
              _this.$router.push('/realName')
            }

          })
          .catch(function (error) {
            console.log(error);
          })
      }
    },
    created() {
      this._totalAssets()
      this._queryuserId()
    }
  }
</script>

<style lang="less" scoped>
  #app {
    header {
      position: relative;
      a {
        position: absolute;
        right: 0.5rem;
        top: 0.5rem;
        i {
          width: 1rem;
          height: 1rem;
          position: absolute;
          right: 1.35rem;
          top: 0.25rem;
          background: url('../../assets/images/sprite.png') -2.5rem -59.8rem;
          background-size: 10.3rem;
        }
        span {
          font-size: 0.64rem;
          color: #fff;
        }
      }
    }
    nav {
      position: absolute;
      top: 3.1rem;
      width: 100%;
      max-width: 750px;
      box-sizing: border-box;
      .navBox {
        margin: 0 0.53rem;
        padding: 0.5rem 0.5rem 0.8rem;
        border-radius: 25px;
        background: #fff;
        box-shadow: 0 0 96px #e4dede;
        position: relative;
        .set {
          width: 1rem;
          height: 0.8rem;
          position: absolute;
          right: 0.554rem;
          top: 0.554rem;
          background: url('../../assets/images/sprite.png')  -1.1rem -38.8rem;
          background-size: 9rem;
        }
        ul {
          li {
            line-height: 1.2rem;
            div {
              border-radius: 50%;
              width: 2.794rem;
              padding: 0 0.5rem;
            }
            h1 {
              font-size: 0.725rem;
              margin-top: 0.5rem;
              a {
                font-size: 0.36rem;
                color: #fff;
                background: -webkit-linear-gradient(left, #ffbc00, #ffa201);
                background: -o-linear-gradient(right, #ffbc00, #ffa201);
                background: -moz-linear-gradient(right, #ffbc00, #ffa201);
                background: linear-gradient(to right, #ffbc00, #ffa201);
                border-radius: 25px;
                padding: 0.15rem 1.1em 0.17rem;
                margin-left: 0.2rem;
              }
            }
            p {
              font-size: 0.512rem;
              color: #929292;
              position: relative;
              display: inline-block;
              padding-right: 1rem;
              i {
                display: block;
                width: 0.7rem;
                height: 0.8rem;
                position: absolute;
                right: 0;
                top: 0.15rem;
                background: url('../../assets/images/sprite.png') -3.9rem -29.6rem;
                background-size: 10.5rem;
              }
            }
          }
        }
        div {
          width: 70%;
          margin: 0.75rem auto 0;
          text-align: center;
          a {
            font-size: 0.597rem;
            color: #6c6c6c;
            font-weight: bold;
            padding: 0.3rem 1.2rem;
            border-radius: 25px;
            -webkit-box-shadow: 0 0 92px #e8e4e4;
            box-shadow: 0 0 7px #cec7c7;
          }
        }
      }
    }
    .property {
      margin: 2.6rem 0.5rem 0;
      border-radius: 25px;
      display: flex;
      box-shadow: 0 0 96px #e4dede;
      padding: 1.2rem 0;
      li {
        flex: 1;
        text-align: center;
        h3 {
          font-size: 0.58rem;
        }
        h1 {
          font-size: 0.75rem;
          color: #ff9501;
          margin: 0.3rem 0 0.4rem;
          em {
            font-size: 0.64rem;
          }
        }
        h4 {
          font-size: 0.47rem;
          color: #929292;
        }
      }
    }
    .function {
      padding: 0 0.64rem;
      margin-top: 1.49rem;
      h1 {
        font-size: 0.725rem;
        color: #343434;
        padding: 0 0 1rem 0.5rem;
      }
      ul {
        display: flex;
        li {
          flex: 1;
          text-align: center;
          a {
            display: block;
            div {
              width: 1.5rem;
              height: 1.5rem;
              background: url('../../assets/images/sprite.png') 0rem -0.1rem;
              background-size: 9rem;
              margin: 0 auto;
            }
            span {
              font-size: 0.469px;
              color: #343434;
            }
          }
          &:nth-of-type(2) {
            div {
              background-position: -1.46rem -0.1rem;
            }
          }
          &:nth-of-type(3) {
            div {
              background-position: -3.1rem 0.1rem;
            }
          }
          &:nth-of-type(4) {
            div {
              background-position: -4.6rem 0.1rem;
            }
          }
          &:nth-of-type(5) {
            div {
              background-position: -6.45rem 0.1rem;
            }
          }
        }
      }
    }
    .function-tool {
      padding: 0 0.64rem;
      margin-top: 1.49rem;
      h1 {
        font-size: 0.725rem;
        color: #343434;
        padding: 0 0 1rem 0.5rem;
      }
      ul {
        display: flex;
        li {
          flex: 1;
          text-align: center;
          a {
            display: block;
            div {
              width: 1.5rem;
              height: 1.5rem;
              background: url('../../assets/images/sprite.png') -0.15rem -1.6rem;
              background-size: 9rem;
              margin: 0 auto;
            }
            span {
              font-size: 0.469px;
              color: #343434;
            }
          }
          &:nth-of-type(2) {
            div {
              background-position: -1.85rem -1.65rem;
            }
          }
          &:nth-of-type(3) {
            div {
              background-position: -3.5rem -1.65rem;
            }
          }
          &:nth-of-type(4) {
            div {
              background-position: -5rem -1.6rem;
            }
          }
          &:nth-of-type(5) {
            div {
              background-position: -6.5rem -1.7rem;
            }
          }
        }
      }
    }
    .function-assist {
      padding: 0 0.64rem 1.5rem;
      margin-top: 1.49rem;
      h1 {
        font-size: 0.725rem;
        color: #343434;
        padding: 0 0 1rem 0.5rem;
      }
      ul {
        display: flex;
        li {
          flex: 1;
          text-align: center;
          a {
            display: block;
            div {
              width: 1.5rem;
              height: 1.5rem;
              background: url('../../assets/images/sprite.png') -0.05rem -3.2rem;
              background-size: 9rem;
              margin: 0 auto;
            }
            span {
              font-size: 0.469px;
              color: #343434;
            }
          }
          &:nth-of-type(2) {
            div {
              background-position: -1.65rem -3.2rem;
            }
          }
          &:nth-of-type(3) {
            div {
              background-position: -3.3rem -3.2rem;
            }
          }
        }
      }
    }

  }
</style>
